import React from 'react';
import { Tabs, Carousel } from 'weaver-mobile';
import * as API_HOMEPAGE from "../../../../apis/homepage";

import Vertical_1 from './vertical_1/vertical_1';
import Vertical_2 from './vertical_2/vertical_2';
import Vertical_3 from './vertical_3/vertical_3';
import Vertical_4 from './vertical_4/vertical_4';
import Vertical_5 from './vertical_5/vertical_5';

import Horizontal_1 from './horizontal_1/horizontal_1';
import Horizontal_2 from './horizontal_2/horizontal_2';
import Horizontal_3 from './horizontal_3/horizontal_3';
import Horizontal_4 from './horizontal_4/horizontal_4';
import Horizontal_5 from './horizontal_5/horizontal_5';
import {isEqual} from "lodash";

class MobileTimeLine extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            loading: false,
            loading2: false,
            visible2: false,
            tabs: [],
            tab: {},
            pagenum: 1,
            result: {},
            moreUrl:'',
            styleName:'',
            styleType:'',
            styleValue:'',
            datainfo:[],
            eid:props.eid
        };
        this.onLoadData=this.onLoadData.bind(this);
    }
    componentWillMount() {
        const { tabs } = this.props;
        if (tabs && tabs.length) {
            const tab = tabs[0];
            this.setState({ tabs });
            this.onLoadData(tab);
        }
    }
    componentWillReceiveProps(nextProps) {
        if (!nextProps.refreshing) {
            const { tabs } = nextProps;
            if (tabs && tabs.length) {
                const tab = tabs[0];
                this.setState({ tabs });
                this.onLoadData(tab);
            }
        }
    }
    render(){

        const {  tabs = [], tab = {},moreUrl,styleName,styleType,datainfo,eid } = this.state;
        let {styleValue}=this.state;
        if(styleValue=="-1"){
            styleValue='1';
        }
        const props = {datainfo,moreUrl,styleName,styleType,styleValue};
        let tabsCom = null;
        if (tabs && tabs.length > 1) {
            let page = 0;
            for (let i = 0, len = tabs.length; i < len; i++) {
                if (tabs[i].tabid == tab.tabid) {
                    page = i;
                    break;
                }
            }
            tabsCom = <Tabs tabs={tabs} page={page} renderTabBar={props => <Tabs.ExpandTabBar {...props} fix={8} />} onTabClick={item => this.onLoadData(item)}  />;
        }
            let elementStyle=<div></div>
            switch(styleValue){
                case '1': elementStyle=<Vertical_1  datainfo={datainfo}  eid={eid} ref="vertical"/>;break;
                case '2': elementStyle=<Vertical_2  datainfo={datainfo}  eid={eid}/>;break;
                case '3': elementStyle=<Vertical_3  datainfo={datainfo}  eid={eid}/>;break;
                case '4': elementStyle=<Vertical_4  datainfo={datainfo}  eid={eid}/>;break;
                case '5': elementStyle=<Vertical_5  datainfo={datainfo}  eid={eid}/>;break;
                case '6': elementStyle=<Horizontal_1  datainfo={datainfo}  eid={eid}/>;break;
                case '7': elementStyle=<Horizontal_2  datainfo={datainfo}  eid={eid}/>;break;
                case '8': elementStyle=<Horizontal_3  datainfo={datainfo}  eid={eid}/>;break;
                case '9': elementStyle=<Horizontal_4  datainfo={datainfo}  eid={eid}/>;break;
                case '10': elementStyle=<Horizontal_5  datainfo={datainfo} eid={eid}/>;break;
                default:elementStyle=<div></div>;
            }

        return (
            <div className="content">
                {tabsCom}
                {elementStyle}
                </div>
        );
    }
        onLoadData(tab, pagenum = 1) {
            const { hpid, subCompanyId, eid, ebaseid } = this.props;
            const { tabid } = tab;
            const params = { hpid, subCompanyId, eid, ebaseid, tabid, tabId: tabid, pagenum };

            this.setState({ loading: true, visible2: false, tab, pagenum });

            API_HOMEPAGE.getElementData(params).then(result => {

                const { data = [] ,tabSetting} = result;
                const {styleName,styleType,styleValue}=tabSetting
                this.setState({ loading: false, datainfo:data ,eid:eid,styleName,styleType,styleValue});
                if(styleValue=='1'){
                    this.refs.vertical.updateData();
                }
            });
        }
}
export default MobileTimeLine;